<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<head th:include="include/admin/adminHeader::html('用户管理')" ></head>
<!--富文本编辑器-->

<script>
    var editor = null;
    $(function(){
        var data4Vue = {
            uri:'addreport',
            beans: [],
            bean: { id: 0,uid:0,uname:'',adress:'',tel:'',describe:'',state:0,level:1,del:0},
            editor:null,
            pagination:{},
            file: null,
            warninglevel:'请选择警情等级',
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                var E = window.wangEditor
                editor = new E('#editor')
                // 或者 var editor = new E( document.getElementById('editor') )
                editor.customConfig.menus = [

                    'link',  // 插入链接
                    'image',  // 插入图片
                    'video',  // 插入视频

                ]
                // 配置服务器端地址
                editor.customConfig.uploadImgServer = '/upload'
                // 将图片大小限制为 3M
                editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
                // 自定义上传参数
                editor.customConfig.uploadFileName = 'image';
                editor.customConfig.uploadImgHooks = {
                    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                    customInsert : function(insertImg, result, editor) {
                        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
                        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                        var url = result.url
                        insertImg(url)
                        // result 必须是一个 JSON 格式字符串！！！否则报错
                    }
                }
                // 必须放到有关于编辑器设置前面
                editor.create();

            },
            methods: {
                list:function(start){
                    var url =  this.uri+ "?start="+start;
                    axios.get(url).then(function(response) {
                        vue.pagination = response.data;
                        vue.beans = response.data.content   ;
                    });
                },
                add: function () {
                    // alert(editor.txt.html())
                    if(!checkEmpty(this.bean.describe, "简介"))
                        return;
                    if(!checkEmpty(this.bean.tel, "电话"))
                        return;
                    if(!checkEmpty(this.bean.describe, "简介"))
                        return;
                    var url = this.uri;
                    var content = editor.txt.html();
                    //axios.js 上传文件要用 formData 这种方式

                    // bean: { id: 0,uid:0,uname:'',tel:'',describe:'',state:0,level:0,del:0},
                    var formData = new FormData();
                    formData.append("id", this.bean.id);
                    formData.append("uname", this.bean.uname);
                    formData.append("describe", this.bean.describe);
                    formData.append("tel", this.bean.tel);
                    formData.append("state", this.bean.state);
                    formData.append("level", this.bean.level);
                    formData.append("del", this.bean.del);
                    formData.append("adress", this.bean.adress);
                    formData.append("content",content)
                    axios.post(url,formData).then(function(response){
                        alert("您所说的："+vue.bean.describe+"     :后台已接收警情，会尽快处理。")
                        vue.bean ={ id: 0,uid:0,uname:'',adress:'',tel:'',describe:'',state:0,level:1,del:0}
                    });
                },
                changelevel:function (lev) {
                    if(lev == 1){
                        $('#dropdownMenu1').attr("class","btn btn-default dropdown-toggle alert-info")
                        this.warninglevel = "提出建议";
                    }
                    if(lev == 2){
                        $('#dropdownMenu1').attr("class","btn btn-default dropdown-toggle alert-warning")
                        this.warninglevel = "影响生活";
                    }
                    if(lev == 3){
                        $('#dropdownMenu1').attr("class","btn btn-default dropdown-toggle alert-danger")
                        this.warninglevel = "十分危急";
                    }
                    this.bean.level = lev;
                },

            }
        });
    });



    // 封装 console.log 函数
    function printLog(title, info) {
        window.console && console.log(title, info);
    }

</script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<body style="margin: 0px;padding: 0px;height: 100%">
<div id="workingArea" style="width: 100%;height: 100%;margin: 0">


<div class="panel panel-primary" style="width: 100%;height: 100%;">
    <div class="panel-heading" style="height: 50px;line-height: 50px">网上报警</div>
    <div class="panel-body">
        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-pencil"><span style="margin-left: 4px">简要描述</span></span>
            <input v-model.trim="bean.describe" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>
        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-user"><span style="margin-left: 4px">报警人</span></span>
            <input  v-model.trim="bean.uname" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>
        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-map-marker" ><span style="margin-left: 4px">地址</span></span>
            <input v-model.trim="bean.adress" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>
        <div class="input-group" style="margin: 10px">
            <span class="input-group-addon glyphicon glyphicon-send"   aria-hidden="true"><span style="margin-left: 4px">联系电话</span></span>
            <input   v-model.trim="bean.tel" type="text" class="form-control"  aria-describedby="basic-addon3">
        </div>

        <div id="editor">
            <p>在此处描述细节</p>
        </div>
        <div style="margin: 10px">
            <div class="dropdown" style="width: 70%;margin-left:15%;">
                <button  class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="true">
                    {{warninglevel}}
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li  class="alert alert-danger" @click="changelevel(3)"><a href="#">十分危急，急需解决</a></li>

                    <li class="alert alert-warning" @click="changelevel(2)"><a href="#">影响生活，尽快解决</a></li>

                    <li class="alert alert-info" @click="changelevel(1)"><a href="#">提出建议，希望解决</a></li>

                </ul>
            </div>

        </div>

        <tr class="submitTR">
            <td colspan="2" align="center">
                <a href="#nowhere"  @click="add" class="btn btn-success">提交</a>
            </td>
        </tr>

    </div>

</div>

</div>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">

</script>

</body>
</html>